<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="生产企业登录"-->
    <div class="header_body">
      <header-nav :slefBack="true" @goBack="goBack"> </header-nav>
    </div>
    <van-search
        v-model="searchParams.title"
        show-action
        placeholder="请输入标题搜索"
        @search="onSearch"
        @cancel="onSearch"
    />
    <van-dropdown-menu ref="menuRef">
      <van-dropdown-item title="地区" ref="itemRef">
        <cascader
            v-model="cascaderValue"
            title="请选择"
            @close="itemRef.toggle();"
            @finish="onFinish"
        />
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 中间 -->
    <div class="warp_body">
      <lodding-card :isLodding="isLodding">
        <div class="warp_right">
          <refresh-list v-model:freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"
                        :resetScroll="resetScroll">
            <div>
              <div v-for="item in goodsList">
                <van-cell-group inset @click="goItemInfo(item)" style="margin-top: 10px">
                  <van-cell :title="item.title" />
                  <van-cell title="地区" :value="item.cityName + item.districtName" />
                  <van-cell title="时间" :value="item.releaseTime" />
                  <van-cell title="来源" :value="item.source" />
                  <van-cell title="作者" :value="item.author" />
                </van-cell-group>
              </div>
            </div>
            <van-empty v-if="goodsList.length == 0" class="no_data" description="暂无数据" />
          </refresh-list>
        </div>
      </lodding-card>
    </div>
  </div>
</template>

<script setup name="ApplyForFirm">
import {GET_PROMOTION_LIST} from "@/api/individualQuery.js";
import Cascader from "@/components/cascader/index.vue"
const router = useRouter();
let resetScroll = ref(0); // 滚动记录
let isLodding = ref(true); // 是否加载中
let goodsList = reactive([]); // 商品列表
let freshMap = reactive({
  refreshLoad: false, // 是否刷新
  listLoading: false, // 是否加载中
  listFinished: false, // 是否加载完成标识
});
const itemRef = ref(null);

const classMap = reactive({
  refreshClass: "classify_refresh_box",
});
const searchParams = reactive({
  cityCode:"",
  cityName:"",
  districtCode:"",
  districtName:"",
  title:"",
})
const onSearch = () => {
  resetScroll.value = 1
  freshMap.listFinished = false;
  freshMap.listLoading = true;
  getPagelist();
};
const cascaderValue = ref('');
const onFinish = ({ selectedOptions }) => {
  itemRef.value.toggle();
  cascaderValue.value = selectedOptions.map((option) => option.name).join('/');
  searchParams.cityCode = selectedOptions[0].code
  searchParams.cityName = selectedOptions[0].name
  searchParams.districtCode = selectedOptions[1].code
  searchParams.districtName = selectedOptions[1].name
  onSearch();
};
//下拉刷新
const onRefresh = () => {
  resetScroll.value = 1
  freshMap.listFinished = false;
  freshMap.listLoading = true;
  getPagelist();
};

// 触底加载
const onLoad = () => {
  resetScroll.value = resetScroll.value + 1
  freshMap.listFinished = true;
  getPagelist(true);
};

//获取页面数据
const getPagelist = async (onLoad) => {
  // 每页显示的个数
  const pageSize = 10
  const res = await GET_PROMOTION_LIST({
    currPage: resetScroll.value,
    pageSize: pageSize,
    ...searchParams
  });
  if (res?.code == 20000) {
    goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
    freshMap.refreshLoad = false;
    freshMap.listLoading = false;
    freshMap.listFinished = res?.data && res?.data.length < pageSize ;
  }
  isLodding.value = false;
};
const goBack = () => {
  router.go(-1);
};

/**
 * 详情
 */
function goItemInfo(item) {
  router.push({
    name: "itemInfo",
    query: {
      itemInfo: JSON.stringify(item)
    },
  });
}
onMounted(async () => {
  getPagelist()
});
</script>
<style lang="less" scoped>
.list-item {
  margin: 10px;
  background-color: #ffff;
  padding: 5px;
  font-size: 16px;
}
.time {
  font-size: 14px;
  color: #AAAA;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
}
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .warp_body {
    display: flex;

    .warp_left {
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .warp_right {
      flex: 1;
    }
  }
}
</style>
